<template>
  <div class="VipReg">
    <div class="VipReg-banner">
      <p class="title">个人会员</p>
      <p>中国建筑装饰协会会员登记表</p>
    </div>
    <div class="VipReg-content wrap">
      <div class="VipReg-content-info">
        <p>会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍</p>
        <p>会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍会员介绍</p>
      </div>
      <div class="VipReg-content-form">
        <van-form @submit="onSubmit" label-align="right">
          <van-field
            v-model="username"
            name="username"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '姓名不能为空' }]"
          />
          <van-field name="sex" label="性别">
            <template #input>
              <van-radio-group v-model="sex" direction="horizontal">
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            readonly
            clickable
            name="date"
            :value="date"
            label="出生日期"
            placeholder="点击选择出生日期"
            :rules="[{ required: true, message: '出生日期不能为空' }]"
            @click="showCalendar = true"
          />
          <van-popup v-model="showCalendar" position="bottom">
            <van-datetime-picker
              v-model="birthDate"
              type="date"
              title="出生日期"
              :min-date="minDate"
              :max-date="maxDate"
              @cancel="showCalendar=false"
              @confirm="onConfirm"
            />
          </van-popup>
          <van-field
            v-model="place"
            name="place"
            label="籍贯"
            placeholder="请输入籍贯"
            :rules="[{ required: true, message: '籍贯不能为空' }]"
          />
          <van-field
            readonly
            clickable
            name="publicFace"
            :value="publicFace"
            label="政治面貌"
            placeholder="点击选择政治面貌"
            :rules="[{ required: true, message: '政治面貌不能为空' }]"
            @click="showPublicFace = true"
          />
          <van-popup v-model="showPublicFace" position="bottom">
            <van-picker
              show-toolbar
              :columns="faceColumns"
              @confirm="confirmPublicFace"
              @cancel="showPublicFace = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="edu"
            :value="edu"
            label="学历"
            placeholder="点击选择学历"
            :rules="[{ required: true, message: '学历不能为空' }]"
            @click="showEdu = true"
          />
          <van-popup v-model="showEdu" position="bottom">
            <van-picker
              show-toolbar
              :columns="eduColumns"
              @confirm="confirmEdu"
              @cancel="showEdu = false"
            />
          </van-popup>
          <van-field
            v-model="profession"
            name="profession"
            label="职称"
            placeholder="请输入职称"
            :rules="[{ required: true, message: '职称不能为空' }]"
          />
          <van-field name="photo" label="照片">
            <template #input>
              <van-uploader v-model="photo" />
            </template>
          </van-field>
          <van-field
            v-model="workYears"
            name="workYears"
            label="从业年限"
            placeholder="请输入从业年限"
            :rules="[{ required: true, message: '从业年限不能为空' }]"
          />
          <van-field
            v-model="school"
            name="school"
            label="毕业院校"
            placeholder="请输入毕业院校"
            :rules="[{ required: true, message: '毕业院校不能为空' }]"
          />
          <van-field
            v-model="study"
            name="study"
            label="所学专业"
            placeholder="请输入所学专业"
            :rules="[{ required: true, message: '所学专业不能为空' }]"
          />
          <van-field
            v-model="cardID"
            name="cardID"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '身份证号不能为空' }]"
          />
          <van-field
            v-model="cardID"
            name="cardID"
            label="身份证号"
            placeholder="请输入身份证号"
            :rules="[{ required: true, message: '身份证号不能为空' }]"
          />
          <van-field
            v-model="email"
            name="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '邮箱不能为空' }]"
          />
          <van-field
            v-model="companyName"
            name="companyName"
            label="单位名称"
            placeholder="请输入单位名称"
            :rules="[{ required: true, message: '单位名称不能为空' }]"
          />
          <van-field
            v-model="companyWork"
            name="companyWork"
            label="单位职务"
            placeholder="请输入单位职务"
            :rules="[{ required: true, message: '单位职务不能为空' }]"
          />
          <van-field
            v-model="tel"
            name="tel"
            type="tel"
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="[{ required: true, message: '联系电话不能为空' }]"
          />
          <van-field
            v-model="fox"
            name="fox"
            label="传真"
            placeholder="请输入传真"
            :rules="[{ required: true, message: '传真不能为空' }]"
          />
          <van-field
            v-model="phone"
            name="phone"
            label="手机号"
            type="tel"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '手机号不能为空' }]"
          />
          <van-field
            v-model="location"
            name="location"
            label="通讯地址"
            placeholder="请输入通讯地址"
            :rules="[{ required: true, message: '通讯地址不能为空' }]"
          />
          <van-field
            v-model="abbreviation"
            name="abbreviation"
            label="邮编"
            type="number"
            placeholder="请输入邮编"
            :rules="[{ required: true, message: '邮编不能为空' }]"
          />
          <van-field name="workCategory" label="类别">
            <template #input>
              <van-radio-group v-model="workCategory" direction="horizontal">
                <van-radio name="1">室内建筑师</van-radio>
                <van-radio name="2">住宅室内设计师</van-radio>
                <van-radio name="3">软装陈设设计师</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="experience"
            name="experience"
            label="工作简历"
            type="textarea"
            placeholder="请输入工作简历"
            :rules="[{ required: true, message: '工作简历不能为空' }]"
          />
          <van-field
            v-model="workMark"
            name="workMark"
            label="工作业绩"
            type="textarea"
            placeholder="请输入工作业绩"
            :rules="[{ required: true, message: '工作业绩不能为空' }]"
          />
          <div class="VipReg-content-file">
            <span>附件下载</span>
            <a href="javascript:;">JGJ56251HGF6.PDF</a>
          </div>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gerenhuiyuan',
  methods: {
    goBack() {
      this.$router.back()
    },
    // 表单提交方法
    onSubmit() {},
    // 日历选择
    onConfirm() {
      this.date = `${this.birthDate.getFullYear()}/${
        this.birthDate.getMonth() + 1
      }/${this.birthDate.getDate()}`
      this.showCalendar = false
    },
    // 政治面貌选择
    confirmPublicFace(value) {
      this.publicFace = value
      this.showPublicFace = false
    },
    // 学历选择
    confirmEdu(value) {
      this.edu = value
      this.showEdu = false
    },
  },
  data() {
    return {
      username: '',
      sex: '1',
      showCalendar: false,
      birthDate: new Date(),
      date: '',
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      place: '', // 籍贯
      publicFace: '', // 政治面貌
      faceColumns: ['群众', '共青团员', '党员'],
      showPublicFace: false,
      edu: '', // 学历
      eduColumns: ['小学', '初中', '高中', '大专', '本科', '硕士'],
      showEdu: false,
      profession: '', // 职称
      photo: [{ url: '' }],
      workYears: '',
      school: '',
      study: '',
      cardID: '',
      email: '',
      companyName: '', // 单位名称
      companyWork: '',
      tel: '',
      fox: '',
      phone: '',
      location: '',
      abbreviation: '', // 邮编
      workCategory: '1',
      experience: '', // 工作简历
      workMark: '', // 工作业绩
      flag: false,
    }
  },
}
</script>

<style lang='scss'>
@import '@/assets/css/base';

.VipReg {
  &-banner {
    // @include bgImg(100%, px2rem(186), '@/assets/img/vip/vip-reg-banner.png');
    text-align: center;
    & > p {
      color: #fffefe;
      font-size: px2rem(24);
      font-weight: bold;
      &.title {
        font-size: px2rem(30);
        font-weight: bold;
        margin-top: px2rem(60);
        margin-bottom: px2rem(22);
      }
    }
  }
  &-content {
    &-info {
      margin-top: px2rem(83);
      margin-bottom: px2rem(40);
      & > p {
        color: #565656;
        font-size: px2rem(24);
        margin-bottom: px2rem(30);
        line-height: px2rem(38);
      }
    }
    &-file {
      font-size: px2rem(28);
      margin-top: px2rem(30);
      box-sizing: border-box;
      padding-left: px2rem(70);
      & > a {
        padding-left: px2rem(47);
        color: $mainColor;
        font-size: px2rem(28);
      }
    }
  }
}
</style>
